import React, { useState, useRef, useEffect } from 'react';
import { Table, Card, Form, Select, Button } from 'antd';
import { ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';

const { Column, ColumnGroup } = Table;

import styles from './index.less';

import { useMount } from 'ahooks';
import { FormInstance } from 'antd/lib/form';
import { connect } from 'umi';

interface DataType {
  key: string;
  id: number; //序号
  stuName: string;
  stuNumber: string;
  secondClassScore: number;
  cet4Score: number;
  cet6Score: number;
  instructorName: string;
  year1Grade: number;
  year2Grade: number;
  year3Grade: number;
  year4Grade: number;
}

const OtherScore: React.FC<any> = (props) => {
  const [records, setRecords] = useState<any>([]);
  const [res, setRes] = useState<any>([]);
  const formRef = useRef<FormInstance>(null);

  const getAllList = () => {
    if (props.dispatch) {
      props.dispatch({
        //路径：model的namespace+effects函数名
        type: 'Model_StudentAnalysisStudentModel/getStudentOtherScoreEffect',
        payload: {
          data: JSON.parse(props.user.currrentuser).account,
          callback: (value: any) => {
            console.log(value);
            setRecords(value);
          },
        },
      });
    }
  };
  useEffect(() => {
    if (props.user.currrentuser.length != 0) {
      console.log(JSON.parse(props.user.currrentuser));
      getAllList();
    }
  }, [props]);
  //筛选
  const searchOnFinish = async (values: any) => {
    // 获取表单值
    let stuName = values.stuName;
    let instructorName = values.instructorName;
    //过滤逻辑
    setRes(records);
    let filteredData = records.filter((item: DataType) => {
      if (stuName && !item.stuName.includes(stuName)) {
        return false;
      }
      if (instructorName && !item.instructorName.includes(instructorName)) {
        return false;
      }
      return true;
    });

    // let filteredData = records.filter((item:any) => (item?.stuName && item.stuName.includes(stuName)
    // ||  (instructorName && item.instructorName.includes(instructorName))))
    // // // 更新结果
    setRecords(filteredData);
  };

  //重置
  const handleReset = () => {
    formRef.current?.resetFields();
    setRecords(res); // 重置为初始数据
  };

  // useMount(() => {
  //   getAllList();
  // });

  return (
    <div className={styles.content}>
      <div className={styles.bar}>
        <Card
          title={
            <span style={{ fontWeight: 'bold', fontSize: 18 }}>
              学生其他成绩汇总
            </span>
          }
        >
          <ProForm
            layout="inline"
            onFinish={searchOnFinish}
            onReset={handleReset}
          >
            <ProFormText
              label="姓名"
              name="stuName"
              placeholder="请输入学生姓名"
              width={160}
            />
            <ProFormText
              label="辅导员"
              name="instructorName"
              placeholder="请输入辅导员姓名"
              width={160}
            />
          </ProForm>
        </Card>
      </div>
      <div className={styles.list}>
        <Card>
          <Table dataSource={records}>
            <Column title="序号" dataIndex="id" key="id" align="center" />
            <Column
              title="姓名"
              dataIndex="stuName"
              key="stuName"
              align="center"
            />
            <Column
              title="学号"
              dataIndex="stuNumber"
              key="stuNumber"
              align="center"
            />
            <Column
              title="二课成绩"
              dataIndex="secondClassScore"
              key="secondClassScore"
              align="center"
            />
            <Column
              title="四级成绩"
              dataIndex="cet4Score"
              key="cet4Score"
              align="center"
            />
            <Column
              title="六级成绩"
              dataIndex="cet6Score"
              key="cet6Score"
              align="center"
            />
            <Column
              title="辅导员"
              dataIndex="instructorName"
              key="instructorName"
              align="center"
            />
            <ColumnGroup title="体测成绩">
              <Column
                title="第一学年"
                dataIndex="year1Grade"
                key="year1Grade"
                align="center"
              />
              <Column
                title="第二学年"
                dataIndex="year2Grade"
                key="year2Grade"
                align="center"
              />
              <Column
                title="第三学年"
                dataIndex="year3Grade"
                key="year3Grade"
                align="center"
              />
              <Column
                title="第四学年"
                dataIndex="year4Grade"
                key="year4Grade"
                align="center"
              />
            </ColumnGroup>
          </Table>
        </Card>
      </div>
    </div>
  );
};

export default connect(({ Model_StudentAnalysisStudentModel, user }: any) => ({
  Model_StudentAnalysisStudentModel,
  user,
}))(OtherScore);
